<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>练习5：DOM操作</title>
	<style type="text/css">
		html,
		div,
		ul,
		li {
			margin: 0px;
			padding: 0px;
		}

		a {
			cursor: pointer;
		}

		li {
			list-style: none;
			cursor: pointer;
		}

		fieldset {
			border: #000 1px dashed;
			width: 225px;
			height: 225px;
			padding: 10px;
			text-align: center;
			float: left;
			margin-left: 5px;
		}

		#cont_left {
			width: 300px;
			height: 500px;
			float: left;
		}

		#cont_right {
			float: left;
		}

		.newcss1 {
			background-color: yellowgreen;
		}
	</style>
</head>

<body>
	<div id="cont_left">
		<ul><img src="img/fold.gif"><a> 通过DOM获取信息 </a>
			<ul id="menu1">
				<li onclick="showImg()"><img src="img/doc.gif">获取原始图片路径</li>
				<li onclick="getFruit()"><img src="img/doc.gif">获取我喜欢的水果</li>
			</ul>
		</ul>

		<ul><img src="img/fold.gif"><a> 通过DOM操作元素 </a>
			<ul id="menu2">
				<li onclick="createImg()"><img src="img/doc.gif">创建图片</li>
				<li onclick="cloneImg()"><img src="img/doc.gif">克隆图片</li>
				<li onclick="changeImg()"><img src="img/doc.gif">改变图片</li>
				<li onclick="removeImg()"><img src="img/doc.gif">删除图片</li>
			</ul>
		</ul>

		<ul><img src="img/fold.gif"><a> 通过DOM操作样式 </a>
			<ul id="menu3">
				<li onclick="changeCss1()"><img src="img/doc.gif">为原始图片加上行间样式</li>
				<li onclick="changeCss2()"><img src="img/doc.gif">为所有的fieldset加上内部样式</li>
			</ul>
		</ul>

	</div>
	<fieldset>
		<legend>原始图片</legend>
		<img id="fruit" src="img/fruit.jpg">
	</fieldset>
	<fieldset>
		<legend>图片路径</legend>
		<p id="msg1">在这里显示</p>
	</fieldset>
	<fieldset>
		<legend>选择你喜欢的水果</legend>
		<ul style="text-align: left;" class="fruitList">
			<li>
				<input name="enjoy" type="checkbox" value="苹果" />苹果
			</li>
			<li>
				<input name="enjoy" type="checkbox" value="香蕉" checked="checked" />香蕉
			</li>
			<li>
				<input name="enjoy" type="checkbox" value="葡萄" />葡萄
			</li>
			<li>
				<input name="enjoy" type="checkbox" value="梨" checked="checked" />梨
			</li>
			<li>
				<input name="enjoy" type="checkbox" value="西瓜" />西瓜
			</li>
		</ul>
		<div id="msg2" style="margin-top: 10px;text-align: left;"></div>
	</fieldset>
	<fieldset>
		<legend>创建图片</legend>
		<div id="msg3"></div>
	</fieldset>
	<fieldset>
		<legend>克隆图片</legend>
		<div id="msg4"></div>
	</fieldset>
	<script>
		//get element
		const originalImg = document.querySelector("#fruit");

		// call function
		show();

		//菜单收缩与扩展
		function show() {
			const menu = document.querySelectorAll("#cont_left>ul");
			const menus = document.querySelectorAll('#cont_left>ul>ul');
			for (let i = 0; i < menu.length; i++) {
				// initialization                     219970142张予菲
				menus.forEach(item=>{
					item.style.display = 'none';
				})
				// empty all the dispaly
				menu[i].addEventListener('click', ()=>{
					menus.forEach(item=>{
						item.style.display = 'none';
					})
					// show the target
					menus[i].style.display = '';
				})
			}
		}
		//获取原始图片路径
		function showImg() {
			const displayRoute = document.querySelector('#msg1');
			// get element src attribute
			displayRoute.innerHTML = originalImg.getAttribute("src");
		}
		//获取喜欢的水果
		function getFruit() {
			// get all of fruitList input
			const fruits = document.querySelectorAll(".fruitList input");
			const myFruits = document.querySelector('#msg2');
			let str = "你最喜欢的水果是:";
			for (let i = 0; i < fruits.length; i++) {
				// initialization
				fruits[i].checked ? str += ` ${fruits[i].value}` : '';
				myFruits.innerHTML = str;
				// listen in fruits with change
				fruits[i].addEventListener("change", () => {
					let str = "你最喜欢的水果是:";
					// forEach fruits and screen checked value
					fruits.forEach(item => {
						item.checked ? str += ` ${item.value}` : '';
						myFruits.innerHTML = str;
					})
				})
			}
		}
		//创建图片
		function createImg() {
			const createImg = document.querySelector('#msg3');
			// if creat img occurrence
			if (document.querySelector('#msg3 img')) return;
			// creat new img label
			const newImg = document.createElement('img');
			// set src attribute
			newImg.setAttribute('src', 'img/grape.jpg');
			// append in creatImg
			createImg.appendChild(newImg);
		}
		//克隆图片
		function cloneImg() {
			// prepare element
			const newImg = document.querySelector("#msg4");
			// if clone img presenced
			if (document.querySelector('#msg4 img')) return;
			// clone originalImg and append in newImg
			newImg.appendChild(originalImg.cloneNode(true));
			// regulate the size
			newImg.style.width = '100%';
			newImg.style.height = '100%';
		}
		//改变图片
		function changeImg() {
			// alter the src and adjust the size
			originalImg.setAttribute('src', 'img/watermelon.jpg');
			originalImg.style.width = '100%';
			originalImg.style.height = '100%';
		}
		//删除图片
		function removeImg() {
			// clean up src attribute
			originalImg.setAttribute('src', '');
		}
		//操作样式1
		function changeCss1() {
			originalImg.style.border = `5px solid red`;
		}
		//操作样式2
		function changeCss2() {
			const fieldsets = document.querySelectorAll("fieldset");
			// set backgroundColor
			fieldsets.forEach(item => {
				item.style.backgroundColor = 'rgb(154,205,50)';
			})
		}
	</script>
</body>

</html>